<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>盒子布局第二次</title>
    <style>
        * {
            font-family: Arial;
            font-size: 14px;
            margin: 0;
            padding: 0;
            border: none;
        }

        a {
            text-decoration: none;
        }

        ul {
            list-style: none;
        }

        html, body {
            width: 100%;
            height: 100%;
        }

        body {
            background-image: url("../images/bg.jpg");
            background-repeat: no-repeat;
        }

        .page-header {
            height: 70px;
            background-color: rgba(0, 0, 0, 0.7);
            padding: 0 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .page-header-list {
            display: flex;
        }

        .page-header-list > li {
            font-size: 0;
        }

        .page-header-list > li > a {
            font-size: 14px;
            color: white;
            border: 1px solid white;
            border-radius: 8px;
            padding: 10px;
            margin-right: 20px;
        }

        .page-header-list > li:last-of-type > a {
            margin-right: 0;
        }

        .page-header-list > li > a:hover {
            background-color: skyblue;
            border: 1px solid skyblue;

        }

        .page-content {
            height: calc(100vh - 70px);
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .content-nav-list {
            height: 300px;
            width: 1000px;
            display: flex;
            justify-content: space-evenly;
        }
        .content-nav-list > li {
            height: 200px;
            width: 180px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-evenly;
            color: white;
            transition: 0.5s linear;
        }

        .content-nav-list > li:nth-of-type(1){
            background-color: #595CA8;
        }
        .content-nav-list > li:nth-of-type(2){
            background-color: #FF9D2E;
        }
        .content-nav-list > li:nth-of-type(3){
            background-color: #01A6DE;
        }
        .content-nav-list > li:nth-of-type(4){
            background-color: #015E91;
        }
        .content-nav-list > li:nth-of-type(5){
            background-color: #1DC128;
        }

        .content-nav-list > li:hover {
            margin-top: -1px;
            box-shadow: 0 0 20px black;
        }
    </style>
</head>
<body>
<!--头部-->
<div class="page-header">
    <a class="page-header-logo" href="#">
        <img class="logo" src="../images/logo.png">
    </a>

    <ul class="page-header-list">
        <li><a href="#">国内校区</a></li>
        <li><a href="#">缅甸校区</a></li>
        <li><a href="#">美国校区</a></li>
        <li><a href="#">非洲校区</a></li>
    </ul>
</div>

<div class="page-content">
    <ul class="content-nav-list">
        <li><img src="../images/item1.png"><span>我的邮箱</span></li>
        <li><img src="../images/item2.png"><span>云服务</span></li>
        <li><img src="../images/item3.png"><span>手机课堂</span></li>
        <li><img src="../images/item4.png"><span>微信服务</span></li>
        <li><img src="../images/item5.png"><span>在线服务</span></li>
    </ul>
</div>
</body>
</html>